<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>男性消费排行榜top10</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/chalk.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>

<body>
  <div id="mCharts1" style="width: 650px; float: right;height:400px"></div>
  <div id="mCharts2" style="width: 650px;  height:400px"></div>
  <div id="mCharts3" style="width: 650px; float: right;height:400px"></div>
  <div id="mCharts4" style="width: 650px;  height:400px"></div>
  <div id="mCharts5" style="width: 650px; float: right;height:400px"></div>
  <div id="mCharts6" style="width: 650px; height:400px"></div>
  <script>
    var mCharts1 = echarts.init(document.getElementById("mCharts1"))
    var mCharts2 = echarts.init(document.getElementById("mCharts2"))
    var mCharts3 = echarts.init(document.getElementById("mCharts3"))
    var mCharts4 = echarts.init(document.getElementById("mCharts4"))
    var mCharts5 = echarts.init(document.getElementById("mCharts5"))
    var mCharts6 = echarts.init(document.getElementById("mCharts6"))

    mCharts1.showLoading() // 在获取数据之前, 显示加载动画
    mCharts2.showLoading()
    mCharts3.showLoading()
    mCharts4.showLoading()
    mCharts5.showLoading()
    mCharts6.showLoading()

    var option1 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'inside',//inside代表依靠鼠标滚轮
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      tooltip: {
          trigger: 'axis',
          axisPointer: {
          type: 'shadow'
      },
        },
      title: {
          text: '▎男性消费排行榜top10',
          left: 20,
          top: 20
        },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          name: '消费总额（/元）',
          type: 'bar',
          data: [] ,
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          barWidth: '30%',
          itemStyle: {
            barBorderRadius: [0,  33, 33, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#00FF00'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#FFFF00'
                } 
              ])
          }
        }
      ]
    };
    var option2 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'inside',// inside代表依靠鼠标滚轮
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      tooltip: {
          trigger: 'axis',
          axisPointer: {
          type: 'shadow'
      },
        },
      title: {
          text: '▎商品热销榜top10',
          left: 20,
          top: 20
        },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          name: '销售量（/件）',
          type: 'bar',
          data: [] ,
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          barWidth: '30%',
          itemStyle: {
            barBorderRadius: [0,  33, 33, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#3498DB'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#F1C40F'
                } 
              ])
          }
        }
      ]
    };
    var option3 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'inside',//inside代表依靠鼠标滚轮
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      tooltip: {
          trigger: 'axis',
          axisPointer: {
          type: 'shadow'
      },
        },
      title: {
          text: '▎女性消费排行榜top10',
          left: 20,
          top: 20
        },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          name: '消费总额（/元）',
          type: 'bar',
          data: [] ,
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          barWidth: '30%',
          itemStyle: {
            barBorderRadius: [0,  33, 33, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#00ffff'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#ff00ff'
                } 
              ])
          }
        }
      ]
    };
    var option4 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'inside',//inside代表依靠鼠标滚轮
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      tooltip: {
          trigger: 'axis',
          axisPointer: {
          type: 'shadow'
      },
        },
      title: {
          text: '▎消费总榜top10',
          left: 20,
          top: 20
        },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          name: '消费总额（/元）',
          type: 'bar',
          data: [] ,
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          barWidth: '30%',
          itemStyle: {
            barBorderRadius: [0,  33, 33, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#00BFFF'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#20B2AA'
                } 
              ])
          }
        }
      ]
    };
    var option5 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'inside',//inside代表依靠鼠标滚轮
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      tooltip: {
          trigger: 'axis',
          axisPointer: {
          type: 'shadow'
      },
        },
      title: {
          text: '▎消费狂魔榜top10',
          left: 20,
          top: 20
        },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          name: '消费次数（/次）',
          type: 'bar',
          data: [] ,
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          barWidth: '30%',
          itemStyle: {
            barBorderRadius: [0,  33, 33, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#005eaa'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#c23531'
                } 
              ])
          }
        }
      ]
    };
    var option6 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          //type: 'inside' 代表依靠鼠标滚轮
          type: 'inside',
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      // animationDuration: 7000, // 动画的时长, 它是以毫秒为单位
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      tooltip: {
          trigger: 'axis',
          axisPointer: {
          type: 'shadow'
      },
        },
      title: {
          text: '▎地区消费排行榜top10',
          left: 20,
          top: 20
        },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          name: '消费总额（/元）',
          type: 'bar',
          data: [] ,
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          barWidth: '30%', //barWidth: 柱子的宽度，这里设置为30%。
          itemStyle: {
            barBorderRadius: [0,  33, 33, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 1, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#FF0000'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#FFA500'
                } 
              ])
          }
        }
      ]
    };
    mCharts1.setOption(option1)
    mCharts2.setOption(option2)
    mCharts3.setOption(option3)
    mCharts4.setOption(option4)
    mCharts5.setOption(option5)
    mCharts6.setOption(option6)
    mCharts1.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts1.off('click') // 解绑click的事件

    mCharts1.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts1.resize()
    }
    //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data11"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data11",function(data,status){
      mCharts1.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      data.sort((a, b) => {
        return a.value - b.value // 从小到大的排序
      })
      var Values = data.map((item) => {
        return item
      })
        mCharts1.setOption(
          {
            yAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    })

    mCharts2.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts2.off('click') // 解绑click的事件

    mCharts2.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts2.resize()
    }

    //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data13"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data13",function(data,status){
      mCharts2.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      data.sort((a, b) => {
        return a.value - b.value // 从小到大的排序
      })
      var Values = data.map((item) => {
        return item
      })
        mCharts2.setOption(
          {
            yAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    })
    mCharts3.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts3.off('click') // 解绑click的事件

    mCharts3.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts3.resize()
    }
    //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data12"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data12",function(data,status){
      mCharts3.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      data.sort((a, b) => {
        return a.value - b.value // 从小到大的排序
      })
      var Values = data.map((item) => {
        return item
      })
        mCharts3.setOption(
          {
            yAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    })
    mCharts4.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts4.off('click') // 解绑click的事件

    mCharts4.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts4.resize()
    }
    //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data14"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data14",function(data,status){
      mCharts4.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      data.sort((a, b) => {
        return a.value - b.value // 从小到大的排序
      })
      var Values = data.map((item) => {
        return item
      })
        mCharts4.setOption(
          {
            yAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    })
    mCharts5.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts5.off('click') // 解绑click的事件

    mCharts5.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts5.resize()
    }
    //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data19"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data19",function(data,status){
      mCharts5.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      data.sort((a, b) => {
        return a.value - b.value // 从小到大的排序
      })
      var Values = data.map((item) => {
        return item
      })
        mCharts5.setOption(
          {
            yAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    })
    mCharts6.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts6.off('click') // 解绑click的事件

    mCharts6.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // console.log('window.onresize...')
      // 调用echarts实例对象的resize方法
      mCharts6.resize()
    }
    //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data10"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data10",function(data,status){
      mCharts6.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      data.sort((a, b) => {
        return a.value - b.value // 从小到大的排序
      })
      var Values = data.map((item) => {
        return item
      })
        mCharts6.setOption(
          {
            yAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    })
  </script>
</body>

</html>